import React, { PureComponent } from 'react'
import { connect, history } from '@umijs/max'
import { Steps } from 'antd'
import { BreadcrumbBar } from '@/components'
import { getHashParameterByName } from '@/utils/helper'
import {
 DataSource, DataTarget, FieldMap, SynConfig,
} from './page-components'
import styles from './index.less'

const menus = [{ name: '接口采集' }, { name: 'Http/Https' }]
const { Step } = Steps

@connect(({ httpsApiCreate }) => ({ ...httpsApiCreate }))
class HttpsApiCreate extends PureComponent {
  constructor(props) {
    super(props)
    this.state = {
      currentStep: 0,
      sourceFormValue: {},
      targetFormValue: {},
      synFormValue: {},
      fieldMapValue: [],
      sourceFields: [{
        columnSize: null,
        comment: ' ',
        dataType: null,
        decimalDigits: null,
        defaultValue: null,
        fieldName: 'errno',
        fieldType: 'string',
        hiveType: null,
        iconShow: 'hidden',
        isNullable: null,
        isPartition: 0,
        isPk: null,
        key: 'errno',
      }],
      targetFields: [{
        fieldName: 'errno',
        fieldType: null,
        iconShow: 'hidden',
        isPk: null,
        key: 'errno',
      }],
    }
  }

  componentWillUnmount() {
    this.props.dispatch({
      type: 'httpsApiCreate/saveFormData',
      params: {
        formData: {},
      },
    })
  }

  // 改变step方法
  changeStep = (stepNum) => {
    this.setState({
      currentStep: stepNum,
    })
  }

  // 返回
  goBack = () => {
    history.push('/dataIntegrate/apiGather/WebService')
  }

  render() {
    const {
      currentStep, sourceFormValue, targetFormValue, synFormValue, fieldMapValue, sourceFields, targetFields,
    } = this.state
    const id = getHashParameterByName('id')
    const isView = getHashParameterByName('isView')
    return (
      <div className={styles.Https_Api_Create}>
        <BreadcrumbBar menu={menus} />
        <div className={styles.back_bar}>
          <i
            className="iconfont icon-zuo"
            onClick={() => { history.push('/dataIntegrate/apiGather/http') }}
            style={{ cursor: 'pointer' }}
          />
          {!id && <span onClick={() => { history.push('/dataIntegrate/apiGather/http') }}>新建任务</span>}
          {id && !isView && <span onClick={() => { history.push('/dataIntegrate/apiGather/http') }}>编辑任务</span>}
          {id && isView && <span onClick={() => { history.push('/dataIntegrate/apiGather/http') }}>查看任务</span>}
        </div>
        <div className={styles.container}>
          <Steps size="small" className={styles.step} current={currentStep}>
            <Step title="数据来源" />
            <Step title="数据目标" />
            <Step title="字段映射" />
            <Step title="同步配置" />
          </Steps>
          {
            currentStep === 0 && <DataSource
              changeStep={this.changeStep}
              goBack={this.goBack}
              initialValues={sourceFormValue}
            />
          }
          {
            currentStep === 1 && <DataTarget
              changeStep={this.changeStep}
              goBack={this.goBack}
              initialValues={targetFormValue}
            />
          }
          {
            currentStep === 2 && <FieldMap
              changeStep={this.changeStep}
              goBack={this.goBack}
              initialValues={fieldMapValue}
              sourceFields={sourceFields}
              targetFields={targetFields}
            />
          }
          {
            currentStep === 3 && <SynConfig
              changeStep={this.changeStep}
              goBack={this.goBack}
              initialValues={synFormValue}
            />
          }
        </div>
      </div>
    )
  }
}

export default HttpsApiCreate
